<template>
    <div v-if="detailList" style="background-color: #fff;min-height: 100vh;">
        <div style="z-index: 100;">
            <div v-if="numId && detailList.optionalDo && numId != 'pinduoduo' && numId!='jingdong'">
                <div style="background-color: #FF2E67;position: fixed;top: 0;width: 100%;">
                    <div style="padding:10px 0px;margin-left:-64px;position: relative;">
                        <img @click="returnBcak" style="width: 10px;top:10px;left:80px;position: absolute;" src="../assets/img/common-icon-ArrowLeftWhite.svg" alt="">
                        <span style="margin-left:50%;color: #fff;font-size: 16px;opacity: .8;">创建分享</span>
                    </div>
                </div>
                <div class="creatShare-award">
                    您的奖励 预计为{{((detailList.optionalDo.zkFinalPrice-detailList.optionalDo.couponAmount)*(detailList.optionalDo.commissionRate)*ownRate/10000).toFixed(2)}}元
                    <!-- ((val.zkFinalPrice-val.couponAmount)*(val.commissionRate)*ownRate/10000).toFixed(2) -->
                </div>
                <div class="creatShare-img">
                    <div style="padding:19px 0 13px 0;">分享图片</div>
                    <ul class="elementSty" v-if="detailList.optionalDo">
                        <li v-for="val in detailList.optionalDo.smallImages.split(',')">
                          <img :src="val" alt="">
                        </li>
                    </ul>
                </div>
                <div class="creatShare-text">
                    <div>编辑分享文案</div>
                    <div class="creatShare-text-box" v-if="detailList.optionalDo">
                        <div>{{detailList.optionalDo.title}}</div>
                        <div> 👇👇👇 </div>
                        <div>【在售价】 ￥{{detailList.optionalDo.zkFinalPrice}} </div>
                        <div>【券后价】 ￥{{(detailList.optionalDo.zkFinalPrice-detailList.optionalDo.couponAmount).toFixed(1)}} </div>
                        <div>【免费下载淘金客下单】 返还{{((detailList.optionalDo.zkFinalPrice-detailList.optionalDo.couponAmount)*(detailList.optionalDo.commissionRate)*ownRate/10000).toFixed(2)}} </div>
                        <div style='margin-top: 25px;'> ---------- </div>
                        <div>长按復·制这段描述，{{detailList.optionalDo.token}},打开[taobao]即可抢购</div>
                        <div class="creatShare-text-btn" @click="copyActiveCode()" v-clipboard:copy="textVal">复制分享文案</div>
                    </div>
                </div>
            </div>
            <div v-if="numId == 'pinduoduo'">
                <div style="background-color: #FF2E67;position: fixed;top: 0;width: 100%;">
                    <div style="padding:10px 0px;margin-left:-64px;position: relative;">
                        <img @click="returnBcak" style="width: 10px;top:10px;left:80px;position: absolute;" src="../assets/img/common-icon-ArrowLeftWhite.svg" alt="">
                        <span style="margin-left:50%;color: #fff;font-size: 16px;opacity: .8;">创建分享</span>
                    </div>
                </div>
                <div class="creatShare-award">
                    您的奖励 预计为{{((detailList.min_group_price-detailList.coupon_discount)*detailList.promotion_rate*ownRate/100000).toFixed(2)}}元
                </div>
                <div class="creatShare-img">
                    <div style="padding:19px 0 13px 0;">分享图片</div>
                    <ul class="elementSty">
                        <li>
                          <img :src="detailList.goods_thumbnail_url" alt="">
                        </li>
                    </ul>
                </div>
                <div class="creatShare-text">
                    <div>编辑分享文案</div>
                    <div class="creatShare-text-box">
                        <div>{{detailList.goodsName}}</div>
                        <div> 👇👇👇 </div>
                        <div>【在售价】 ￥{{(detailList.min_group_price-detailList.coupon_discount)/100}} </div>
                        <div>【券后价】 ￥{{detailList.min_group_price/100}} </div>
                        <div>【免费下载淘金客下单】 返还{{((detailList.min_group_price-detailList.coupon_discount)*detailList.promotion_rate*ownRate/100000).toFixed(2)}} </div>
                        <div style='margin-top: 25px;'> ---------- </div>
                        <div>【抢购地址】 {{urlPin}}</div>
                        <div class="creatShare-text-btn"  @click="copyActiveCode()" v-clipboard:copy="textVal">复制分享文案</div>
                    </div>
                </div>
            </div>
            <div v-if="numId == 'jingdong' && detailList.skuname">
                <div style="background-color: #FF2E67;position: fixed;top: 0;width: 100%;">
                    <div style="padding:10px 0px;margin-left:-64px;position: relative;">
                        <img @click="returnBcak" style="width: 10px;top:10px;left:80px;position: absolute;" src="../assets/img/common-icon-ArrowLeftWhite.svg" alt="">
                        <span style="margin-left:50%;color: #fff;font-size: 16px;opacity: .8;">创建分享</span>
                    </div>
                </div>
                <div class="creatShare-award">
                    您的奖励 预计为{{(detailList.commissionInfo.couponCommission*ownRate).toFixed(2)}}元
                </div>
                <div class="creatShare-img">
                    <div style="padding:19px 0 13px 0;">分享图片</div>
                    <ul class="elementSty">
                        <li v-for="val in detailList.imageInfo.imageList">
                          <img :src="val.url" alt="">
                        </li>
                    </ul>
                </div>
                <div class="creatShare-text">
                    <div>编辑分享文案</div>
                    <div class="creatShare-text-box">
                        <div>{{detailList.skuname}}</div>
                        <div> 👇👇👇 </div>
                        <div>【在售价】 ￥{{detailList.priceInfo.price}} </div>
                        <div>【券后价】 ￥{{detailList.priceInfo.lowestCouponPrice}} </div>
                        <div>【免费下载淘金客下单】 返还{{(detailList.commissionInfo.couponCommission*ownRate).toFixed(2)}} </div>
                        <div style='margin-top: 25px;'> ---------- </div>
                        <div>【抢购地址】 {{urlPin}}</div>
                        <div class="creatShare-text-btn"  @click="copyActiveCode()" v-clipboard:copy="textVal">复制分享文案</div>
                    </div>
                </div>
            </div>
            <div style="text-align: center;padding:28px 0;">
                <span class="creatShare-line"></span>
                <span>分享图文</span>
                <span class="creatShare-line" style="margin-left: 12px;"></span>
            </div>
            
            <!-- 如果需要展示截取的图片,给一个img标签 -->
            <ul class="invitation-shear">
                <li>
                    <img @click="wechatFen(0,'weixin')" src="../assets/img/share-icon-wechat@2x.png" alt="">
                    <p>微信好友</p>
                </li>
                <li>
                    <img @click="wechatFen(1,'weixin')" src="../assets/img/share-icon-circle@2x.png" alt="">
                    <p>朋友圈</p>
                </li>
                <!-- <li @click="wechatFen(1,'qq')">
                    <img src="../assets/img/share-icon-qq@2x.png" alt="">
                    <p>QQ</p>
                </li> -->
                <li>
                    <img @click="saveImg" src="../assets/img/share-icon-download@2x.png" alt="">
                    <p>保存到本地</p>
                </li>
            </ul>
        </div>
        
        <!-- 把需要生成截图的元素放在一个元素容器里,设置一个ref -->
        <div class="image_tofile" ref="imageTofile" style="position: absolute;top: 0;width:100%;z-index: -100;height: 100vh;">
            <div class="creatShare-text-box" style="width:100%;height: 100%;
            padding:10px 13px; 
            background-color: #fff;
            border-radius: 7px;
            font-size: 14px;
            font-weight:400;" v-if="numId && detailList.optionalDo && numId != 'pinduoduo' && numId!='jingdong'">
                <div style="display: flex;justify-content: end;">
                    <!-- <img style="width: 50px;height: 50px;border-radius: 26px;" v-if="avater" :src="avater" alt=""> -->
                    <img style="width: 50px;height: 50px;border-radius: 26px;" src="../assets/img/logo.svg" alt="">
                    <div style="margin-left: 15px;">
                        <div style="height:25px;line-height: 35px;">
                            <span>【{{userPhone}}】</span>
                            <span>邀请您一起购买</span>
                        </div>
                        <!-- <div style="color:#FF2E67;height:25px;line-height: 35px;">
                            14人已购买
                        </div> -->
                    </div>
                </div>
                <img style="width:100%;margin:23px 0 15px 0;" :src="detailList.optionalDo.smallImages.split(',')[0]" alt="">
                <div>
                    <span style="color:#fff;background: #FF2E67;padding:2px;font-size: 10px;border-radius: 4px;">淘宝</span>
                    <span style="font-size: 14px;font-weight: bold;">{{detailList.optionalDo.title}}</span>
                    
                </div>
                <div style="margin:10px 0 23px 0;">
                    <span style="font-size: 20px;color:#FF2E67;">￥{{(detailList.optionalDo.zkFinalPrice-detailList.optionalDo.couponAmount).toFixed(1)}}</span>
                    <span style="margin:0 2px;font-size: 10px;color:#FF2E67;border: 1px solid #FF2E67;border-radius: 3px;padding:0 3px;">券后</span>
                    <span style="text-decoration: line-through;color:#bbb;">￥{{detailList.optionalDo.zkFinalPrice}}</span>
                    <div style="display: inline-block;float: right;">
                        <span class="rectangleSty">券</span>
                        <span class="afterSty">￥{{detailList.optionalDo.couponAmount}}</span>
                    </div>
                </div>
                <div style="display: flex;justify-content: space-between;">
                    <div id="qrCode" ref="qrCodeDiv" style="width: 86px;"></div>
                    <div style="font-size: 14px;display: inline-block;width:80px;margin-top:5px;">长按识别二维码 查看商品详情</div>
                    <div style="margin-right: -13px;margin-top: 25px;padding-left:22px;background-image: linear-gradient(to right,#FF5AA0,#FF2E67);border-radius: 16px 0px 0px 16px;height:37px;width:136px;line-height:37px;color:#fff;font-size:12px;">邀请码：{{inviteCode}}</div>
                </div>
            </div>
            <div class="creatShare-text-box" style="width:100%;height: 100%;
            padding:10px 13px; 
            background-color: #fff;
            border-radius: 7px;
            font-size: 14px;
            font-weight:400;" v-if="numId == 'pinduoduo'">
                <div style="display: flex;justify-content: end;">
                    <!-- <img style="width: 50px;height: 50px;border-radius: 26px;" v-if="avater" :src="avater" alt=""> -->
                    <img style="width: 50px;height: 50px;border-radius: 26px;" src="../assets/img/logo.svg" alt="">
                    <div style="margin-left: 15px;">
                        <div style="height:25px;line-height: 35px;">
                            <span>【{{userPhone}}】</span>
                            <span>邀请您一起购买</span>
                        </div>
                        <!-- <div style="color:#FF2E67;height:25px;line-height: 35px;">
                            14人已购买
                        </div> -->
                    </div>
                </div>
                <img style="width:100%;margin:23px 0 15px 0;" :src="detailList.goods_thumbnail_url" alt="">
                <div>
                    <span style="color:#fff;background: #FF2E67;padding:2px;font-size: 10px;border-radius: 4px;">拼多多</span>
                    <span style="font-size: 14px;font-weight: bold;">{{detailList.goods_name}}</span>
                    
                </div>
                <div style="margin:10px 0 23px 0;">
                    <span style="font-size: 20px;color:#FF2E67;">￥{{(detailList.min_group_price-detailList.coupon_discount)/100}}</span>
                    <!-- <span style="float: right;color:#888;">月售 {{detailList.optionalDo.tkTotalSales}}</span> -->
                    <span class="rectangleSty">券</span>
                    <span class="afterSty">￥{{detailList.coupon_discount/100}}</span>
                    <span style="text-decoration: line-through;color:#bbb;">￥{{detailList.min_group_price/100}}</span>
                </div>
                <div style="display: flex;justify-content: space-between;">
                    <div id="qrCode" ref="qrCodeDiv" style="width: 86px;"></div>
                    <div style="font-size: 14px;display: inline-block;width:80px;margin-top:5px;">长按识别二维码 查看商品详情</div>
                    <div style="margin-right: -13px;margin-top: 25px;padding-left:22px;background-image: linear-gradient(to right,#FF5AA0,#FF2E67);border-radius: 16px 0px 0px 16px;height:37px;width:136px;line-height:37px;color:#fff;font-size:12px;">邀请码：{{inviteCode}}</div>
                </div>
            </div>
            <div class="creatShare-text-box" style="width:100%;height: 100%;
            padding:10px 13px; 
            background-color: #fff;
            border-radius: 7px;
            font-size: 14px;
            font-weight:400;" v-if="numId == 'jingdong'">
                <div style="display: flex;justify-content: end;">
                    <!-- <img style="width: 50px;height: 50px;border-radius: 26px;" v-if="avater" :src="avater" alt=""> -->
                    <img style="width: 50px;height: 50px;border-radius: 26px;" src="../assets/img/logo.svg" alt="">
                    <div style="margin-left: 15px;">
                        <div style="height:25px;line-height: 35px;">
                            <span>【{{userPhone}}】</span>
                            <span>邀请您一起购买</span>
                        </div>
                        <!-- <div style="color:#FF2E67;height:25px;line-height: 35px;">
                            14人已购买
                        </div> -->
                    </div>
                </div>
                <img style="width:100%;margin:23px 0 15px 0;" :src="detailList.imageInfo.imageList[0].url" alt="">
                <div>
                    <span style="color:#fff;background: #FF2E67;padding:2px;font-size: 10px;border-radius: 4px;">京东</span>
                    <span style="font-size: 14px;font-weight: bold;">{{detailList.skuname}}</span>
                    
                </div>
                <div style="margin:10px 0 23px 0;">
                    <span style="font-size: 20px;color:#FF2E67;">￥{{detailList.priceInfo.lowestCouponPrice}}</span>
                    <!-- <span style="float: right;color:#888;">月售 {{detailList.optionalDo.tkTotalSales}}</span> -->
                    <span class="rectangleSty">券</span>
                    <span class="afterSty">￥{{detailList.couponInfo.couponList[0].discount}}</span>
                    <span style="text-decoration: line-through;color:#bbb;">￥{{detailList.priceInfo.price}}</span>
                </div>
                <div style="display: flex;justify-content: space-between;">
                    <div id="qrCode" ref="qrCodeDiv" style="width: 86px;"></div>
                    <div style="font-size: 14px;display: inline-block;width:80px;margin-top:5px;">长按识别二维码 查看商品详情</div>
                    <div style="margin-right: -13px;margin-top: 25px;padding-left:22px;background-image: linear-gradient(to right,#FF5AA0,#FF2E67);border-radius: 16px 0px 0px 16px;height:37px;width:136px;line-height:37px;color:#fff;font-size:12px;">邀请码：{{inviteCode}}</div>
                </div>
            </div>
            <!-- 这里放需要截图的元素,自定义组件元素也可以 -->
        </div>
        <!-- <img style="position: fixed;top:0;height:100vh; width:100%;z-index: 10000000;" :src="htmlUrl" alt=""> -->
        <div style="position: fixed;top:0;width:100%;height: 100vh;background-color: rgba(0,0,0,.5);" v-if="showLoading">
            <div style="width:100%;text-align: center;color:#fff;position: relative;top:44vh;">
                <span v-if="shareShow">正在生成分享</span>
                <span v-else>正在保存</span>
            </div>
            <van-loading style="margin-top:46vh;margin-left:calc(50% - 15px)" color="#ff2e67" />
        </div>
    </div>
</template>

<script>
    import Clipboard from 'clipboard'
    import html2canvas from 'html2canvas'
    import { Toast,Loading  } from 'vant'
    import QRCode from 'qrcodejs2'
    // import QRCode from 'qrcode'
    export default {
        name: "creatShare",
        data(){
            return{
                textVal:'',
                detailList:{},
                htmlUrl:'',
                shareData:[],
                sharewx:'',
                avater:"",
                userPhone:'',
                inviteCode:'',
                userId:'',
                urlPin:'',
                ownRate:0.6,
                showLoading:false,
                shareShow:true
            }
        },
        props:['numId'],
        components: {
            html2canvas,
            [Loading.name]:Loading
        },
        mounted() {
            // this.numId = this.$route.params.id;
            // localStorage.setItem('returnVal',false);
            window.noBack = this.returnBcak.bind(this);
            this.$addStorageEvent('returnVal',false);
            this.userId = localStorage.getItem('user_id');
            this.initData();
            if(this.numId && this.numId != 'pinduoduo' && this.numId != 'jingdong'){
                this.$http.get(this.utils.config +"/netmall/app/taobao/api/app/detail/skipProductDetail?numIid="+this.numId).then((data) => {
                    if (data.data.success) {
                        this.detailList = data.data.result;
                        this.$http.get(this.utils.config +"/netmall/app/taobao/api/getNewLinkAddress?num_iid="+this.numId+"&user_id="+this.userId).then((res) => {
                            this.detailList.optionalDo.token = JSON.parse(res.data.message).item_tpwd;
                            var returnMon = ((this.detailList.optionalDo.zkFinalPrice-this.detailList.optionalDo.couponAmount)*(this.detailList.optionalDo.commissionRate)*this.ownRate/10000).toFixed(2);
                            this.textVal = `${this.detailList.optionalDo.title}
                            👇👇👇
                            【在售价】 ￥${this.detailList.optionalDo.zkFinalPrice}
                            【券后价】 ￥${(this.detailList.optionalDo.zkFinalPrice-this.detailList.optionalDo.couponAmount).toFixed(1)}
                            【免费下载淘金客下单】 返还${returnMon}
                            
                            ----------
                            长按復·制这段描述，${this.detailList.optionalDo.token},打开[淘宝]即可抢购`;
                            this.creatQrCode();
                            this.toImage();
                        })
                    }
                })
            }
        },
        methods:{
            //复制文案
            copyActiveCode() {
                Toast("复制成功");
            },
            //二维码
            creatQrCode() {
                var that = this;
                var setIt = setInterval(()=>{
                    if(that.numId != 'pinduoduo' && that.numId != 'jingdong' && that.$refs.qrCodeDiv && that.numId && that.inviteCode){
                        // console.log("http://www.taojinke.top/shopIndex/#/shareProPage/"+that.numId+','+that.userId+','+that.inviteCode)
                        new QRCode(that.$refs.qrCodeDiv, {
                            text: "http://www.taojinke.top/shopIndex/#/shareProPage/"+that.numId+','+that.userId+','+that.inviteCode,
                            width: 90,
                            height: 90,
                            colorDark: "#333333", //二维码颜色
                            colorLight: "#ffffff", //二维码背景色
                            correctLevel: QRCode.CorrectLevel.L, //容错率，L/M/H
                            src:'../assets/img/logo.svg'
                        })
                        clearInterval(setIt)
                    }
                    if(that.numId == 'pinduoduo' && that.$refs.qrCodeDiv && that.urlPin){
                        new QRCode(that.$refs.qrCodeDiv, {
                            text: that.urlPin,
                            width: 90,
                            height: 90,
                            colorDark: "#333333", //二维码颜色
                            colorLight: "#ffffff", //二维码背景色
                            correctLevel: QRCode.CorrectLevel.L, //容错率，L/M/H
                            src:'../assets/img/logo.svg'
                        })
                        clearInterval(setIt)
                    }
                    if(that.numId == 'jingdong' && that.$refs.qrCodeDiv && that.urlPin){
                        new QRCode(that.$refs.qrCodeDiv, {
                            text: that.urlPin,
                            width: 90,
                            height: 90,
                            colorDark: "#333333", //二维码颜色
                            colorLight: "#ffffff", //二维码背景色
                            correctLevel: QRCode.CorrectLevel.L, //容错率，L/M/H
                            src:'../assets/img/logo.svg'
                        })
                        clearInterval(setIt)
                    }
                },100)
            },
            //手机号四位变星号
            starPhone(phoneNum){
                let str =  String(phoneNum),
                strLen = str.slice(-7,-3);
                return str.replace(strLen,"****");
            },
            //用户信息
            initData(){
                var that = this;
                that.$http.post(that.utils.config+"/netmall/app/person/api/getPersonCenterData?user_id="+that.userId,{user_id:that.userId}).then((data) => {
                    if(!data.data.success){
                        localStorage.clear();
                        that.$router.push('/');
                    }else{
                        that.ownRate = data.data.result.tbMnUser.ownRate/100;
                        that.userPhone = that.starPhone(data.data.result.tbMnUser.phone);
                        that.avater = data.data.result.tbMnUser.avater;
                        that.inviteCode = data.data.result.tbMnUser.inviteCode;  
                        if(that.numId == 'pinduoduo'){
                            that.detailList = JSON.parse(localStorage.getItem('pinduoduo'));
                            that.$http.get(that.utils.config + "/netmall/app/pdd/api/detail/openPddDetail?user_id="+that.userId+"&goodsId="+that.detailList.goods_id).then((data) => {
                                if (data.data.success) {   
                                    var list = JSON.parse(data.data.result.json);
                                    that.urlPin = list.data.mobile_short_url;
                                    var returnMon = ((that.detailList.min_group_price-that.detailList.coupon_discount)*that.detailList.promotion_rate*that.ownRate/100000).toFixed(2);
                                    that.textVal = `${that.detailList.goods_name}
                                    👇👇👇
                                    【在售价】 ￥${(that.detailList.min_group_price - that.detailList.coupon_discount)/100}
                                    【券后价】 ￥${that.detailList.min_group_price/100}
                                    【免费下载淘金客下单】 返还${returnMon}
                                
                                    ----------
                                    【抢购地址】 ${that.urlPin}`;
                                    that.creatQrCode();
                                    that.toImage();
                                }
                            })
                        }
                        if(that.numId == 'jingdong'){
                            that.detailList = JSON.parse(localStorage.getItem('jingdong'));
                            that.$http.post(that.utils.config + "/netmall/app/jd/api/zhuanlian?user_id="+that.userId+"&materialId="+that.detailList.materialUrl+"&couponUrl="+that.detailList.couponInfo.couponList[0].link).then((data) => {
                                if (data.data.success) {   
                                    var list = JSON.parse(data.data.data);
                                    if(list.code == -1){
                                        this.$emit('returnPage',false)
                                        return;
                                    }
                                    that.urlPin = list.data.shortURL;
                                    that.textVal = `${that.detailList.skuname}
                                    👇👇👇
                                    【在售价】 ￥${that.detailList.priceInfo.price}
                                    【券后价】 ￥${that.detailList.priceInfo.lowestCouponPrice}
                                    【免费下载淘金客下单】 返还${(that.detailList.commissionInfo.couponCommission*that.ownRate).toFixed(2)}
                                
                                    ----------
                                    【抢购地址】 ${that.urlPin}`;
                                    that.creatQrCode();
                                    that.toImage();
                                }
                            })
                        }               
                    }     
                })
            },
             // 页面元素转图片
            toImage () {                
                var that = this;
                setTimeout(()=>{
                    html2canvas(that.$refs.imageTofile, {
                        scrollY: 0, 
                        scrollX: 0,
                        backgroundColor: null,
                　　　　 useCORS: true // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
                    }).then((canvas) => {
                        let url = canvas.toDataURL('image/png');
                        // let arr = url.split(',');
                        // let mime = arr[0].match(/:(.*?);/)[1];
                        // let bytes = atob(arr[1]); // 解码base64
                        // let n = bytes.length
                        // let ia = new Uint8Array(n);
                        // while (n--) {
                        //     ia[n] = bytes.charCodeAt(n);
                        // }
                        // var fileVal = new File([ia], "fenxiang.png", { type: mime });
                        // let params = new FormData();
                        // params.append('file',fileVal);
                        // let config = { headers: { //添加请求头
                        //     'Content-Type': 'multipart/form-data' } }
                        // this.$http.post(this.utils.config+"/netmall/app/person/api/upload",params,config).then((data) => {
                        //     if(data.data.success){
                        //         that.htmlUrl = data.data.message;
                        //     }
                        // })

                        let bitmap = new plus.nativeObj.Bitmap("test");
                        bitmap.loadBase64Data(url, (e) => {
                            bitmap.save('_doc/_tmp/head' + new Date().getTime() + '.png', {}, (e) => {
                                that.htmlUrl = e.target;
                            });
                        }, (e) => {
                            Toast('加载Base64图片数据失败：' + JSON.stringify(e));                            
                        });
                    })
                }, 1000)
            },
            //保存到本地
            saveImg(){
                var that = this;
                that.showLoading = true;
                that.shareShow = false;
                var setTim1 = setInterval(()=>{
                        if(that.htmlUrl){
                        setTimeout(()=>{
                            that.showLoading = false;
                        },2000)
                        plus.gallery.save(            
                            that.htmlUrl,            
                            function () {               
                                Toast("保存成功");              
                            },            
                            function () {                
                                Toast("保存失败");                
                            }            
                        );  
                        clearInterval(setTim1);
                        }
                },200)
            },
            //微信分享
            wechatFen(num,str){
                var that = this;
                that.shareShow = true;
                that.showLoading = true;
                that.$http.get(that.utils.config+"/netmall/app/person/api/everyDayTask?user_id="+that.userId+"&taskName=分享商品").then((data) => {
                })
                var setTim2 = setInterval(()=>{
                    if(that.htmlUrl){
                        // let msg = {  
                        //     pictures: [that.htmlUrl],   // pictures 参数为数组  
                        //     type:'image'  
                        // };
                        // plus.share.sendWithSystem(  
                        //     msg,  
                        //     function(e) {  
                        //         that.showLoading = false;
                        //         Toast('分享成功') 
                        //     },  
                        //     function(e) {  
                        //         that.showLoading = false;
                        //         Toast('分享失败') 
                        //     }  
                        // );
                        plus.share.getServices(function(e) {
                            that.shareData = e;　　　　　　　　//这个回调函数的参数 e 就包含了 所有对象的数组
                    　　　　//在这个数组里 找到属于微信的对象 循环匹配查找
                        　　for(var i in e){　　　　　　　　
                            　　if(str == e[i].id){
                                　　that.sharewx = e[i]　　//保存到变量里 （之后即可使用该对象发起分享）
                            　　}
                        　　}
                            if(!that.sharewx.authenticated){
                                s.authorize(()=>{
                                    Toast("认证完成！");
                                }, function(e){
                                    Toast("未进行认证");
                                }, {
                                    "appid": "ww261d9795b7ae9c87"
                                });
                            }
                            var typeStr;
                            if(num == 0){
                                typeStr='WXSceneSession';
                            }
                            if(num == 1){
                                typeStr='WXSceneTimeline';
                            }
                            let msg = {
                                type: 'image',　　//分享的内容的类型 
                                title: '淘金客',
                                pictures: [that.htmlUrl],
                                extra:{scene:typeStr} // 'WXSceneSession'分享给好友，'WXSceneTimeline'分享到朋友圈
                        　　}
                            setTimeout(()=>{
                                that.showLoading = false;
                            },1000)
                        　　that.sharewx.send(msg, function() {
                            　　Toast('分享成功')
                        　　},function(error) {
                            　　 Toast('分享失败')
                        　　})   
                    　　})
                        clearInterval(setTim2);
                    }
                },200)
            },
            returnBcak(){
                // this.$router.push(pageUrl);
                window.noBack = false;
                this.$emit('returnPage',false)
            },
            copy() {
                var clipboard = new Clipboard('.person-user-reject')
                clipboard.on('success', e => {
                    this.$toast("复制成功")
                    // 释放内存
                    clipboard.destroy()
                })
                clipboard.on('error', e => {
                    // 释放内存
                    clipboard.destroy()
                })
            }
        }

    }
</script>

<style scoped>
    .rectangleSty{
        background: #FF2E67;
        line-height: 20px;
        padding: 2px 4px;
        color: #fff;
        font-size: 10px;
        text-align: center;
        width: 10px;
        position: relative;
      }
      .rectangleSty::after{
        content: ' ';
        position: absolute;
        top: 0;
        right: -8px;
        border-width: 17px 8px 0px 0px;
        border-style: solid;
        border-color: #FF2E67 transparent transparent transparent;
      }
      .afterSty{
        background: rgba(255, 46, 103, 0.2);
        line-height: 20px;
        padding: 2px 4px;
        padding-left:9px;
        color: #FF2E67;
        font-size: 10px;
        text-align: center;
        width: 10px;
        position: relative;
        left:-4px;
      }
    .elementSty{
        white-space: nowrap;
        overflow-x: scroll;
        padding:20px 10px;
    }
    .elementSty::-webkit-scrollbar {
        display: none
    }
    .elementSty li{
        display: inline-block;
        text-align: center;
        color:#fff;
        font-size: 16px;
        margin-right: 10px;
    }
    .elementSty li>img{
        width:87px;
        height: 87px;
        margin-right:5px;
    }
    .creatShare-award{
        margin-top: 38px;
        background-color: #FFEBE3;
        font-size: 14px;
        text-align: center;
        color:#C54613;
        width:100%;
        height:46px;
        line-height: 46px;
    }
    .creatShare-img{
        padding-left:15px;
        font-size: 14px;
        font-weight: bold;
    }
    .creatShare-img img{
        width:87px;
        height:87px;
        border-radius: 7px;
    }
    .creatShare-text{
        padding:0 15px;
        font-size: 14px;
        font-weight: bold;
    }vh
    .creatShare-text-box{
        width:100%;
        height:100vh;
        padding:10px 13px; 
        background-color: #F1F1F1;
        border-radius: 7px;
        font-size: 14px;
        margin-top: 15px;
        font-weight:400;
    }
    .creatShare-text-btn{
        width:200px;
        height:44px;
        line-height: 44px;
        color:#fff;
        font-size: 14px;
        font-weight: bold;
        text-align: center;
        border-radius: 22px;
        background-image: linear-gradient(to right, #FF5AA0 , #FF2E67);
        margin-top: 25px;
        margin-left: calc(50% - 100px);
    }
    .creatShare-line{
        width:50px;
        display: inline-block;
        height: 1px;
        background-color: #CECECE;
        margin-right: 12px;
        position: relative;
        top: -4px;
    }
    .invitation-shear{
        margin-top: -25px;
        padding-bottom: 30px;
        text-align: center;
        display: flex;
        justify-content: space-around;
        width: 100%;
        font-size:12px;
        font-family:SourceHanSansSC-Regular,SourceHanSansSC;
        font-weight:400;
        color:rgba(136,136,136,1);
        line-height:18px;
    }
    .invitation-shear li{
        margin-top: 32px;
    }
    .invitation-shear li img{
        width: 38px;
        height: 38px;
        border-radius: 50%;
    }
    .invitation-shear li p{
        margin-top: 6px;
    }
</style>
